import {Button, Card, Form, Input, Space} from "antd";
import {EyeInvisibleOutlined, EyeTwoTone} from "@ant-design/icons";
import {errorMessage, successMessage} from "@/common/components/Message";
import {MySendCode} from "@/common/components/SendCode";
import {ApiConstants} from "@/apis/constants";
import {register} from "@/apis/user";
import {useState} from "react";


interface Props {
    changeActive: Function
}

const rule = {
    username: [{required: true, message: "请输入用户名"}],
    password: [{required: true, message: "请输入密码"}],
    email: [{required: true, message: "请输入邮箱"}],
    code: [{required: true, message: "请输入验证码"}]
}

const {Item} = Form

/**
 * @Description: 注册组件
 * @author zhaojiuyi
 * @date 2023/4/14
 */
export function MyRegister(props: Props) {

    let changeActive = () => props.changeActive()
    let [username, setUsername] = useState<string>("")
    let [password, setPassword] = useState<string>("")
    let [email, setEmail] = useState<string>("")
    let [code, setCode] = useState<number | string>("")

    /* 用户注册 */
    async function registerHandler() {
        const {code: resCode, msg} = await register({username, password, email, code})
        if (resCode === ApiConstants.SUCCESS) {
            successMessage("注册成功，请返回登录")
            setUsername("")
            setPassword("")
            setEmail("")
            setCode("")
        } else {
            errorMessage(msg)
        }

    }

    return (
        <Card style={{width: 400, marginTop: 16}}>
            <Form name="registerForm" onFinish={registerHandler} autoComplete="off">
                <h2>注册</h2>
                <Item name="username" rules={rule.username}>
                    <Space.Compact style={{width: "100%"}}>
                        <Input className="input" value={username} onChange={(e) => {
                            setUsername(e.target.value)
                        }} placeholder="username"/>
                    </Space.Compact>
                </Item>
                <Item name="password" rules={rule.password}>
                    <Space.Compact style={{width: "100%"}}>
                        <Input.Password
                            className="input" placeholder="password" value={password}
                            onChange={(e) => {
                                setPassword(e.target.value)
                            }}
                            iconRender={(visible) => (visible ? <EyeTwoTone/> : <EyeInvisibleOutlined/>)}/>
                    </Space.Compact>
                </Item>
                <Item name="email" rules={rule.email}>
                    <Space.Compact style={{width: "100%"}}>
                        <Input className="input" value={email} onChange={(e) => {
                            setEmail(e.target.value)
                        }} placeholder="email"/>
                    </Space.Compact>
                </Item>
                <Item name="code" rules={rule.code}>
                    <Space.Compact style={{width: "100%"}}>
                        <Input className="input" value={code} onChange={(e) => {
                            setCode(e.target.value)
                        }} placeholder="code"/>
                        <MySendCode email={email} time={60}/>
                    </Space.Compact>
                </Item>
                <Item>
                    <Button type="primary" htmlType="submit" className="login_button">注册</Button>
                </Item>
                <p>已有账号？<Button type="link" onClick={changeActive}>登录</Button></p>
            </Form>
        </Card>
    );
}
